<template>
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px" :inline="true" label-position="top">
      <el-form-item label="名称" prop="name" style="width:48%;">
        <el-input v-model="formData.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="助手类型" prop="graph_id">
        <el-select v-model="formData.graph_id" placeholder="助手类型" clearable @change="upConfig">
          <el-option
            v-for="dict in agentType"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      
      <div v-if="formData.graph_id=='retrieval_graph'">
        <el-divider content-position="left">RAG代理配置</el-divider>
        <el-form-item label="user_id"><el-input v-model="agentC.user_id" :disabled="isDis" placeholder="user_id" /></el-form-item>
        <el-form-item label="embedding_model"><el-input v-model="agentC.embedding_model" :disabled="isDis" placeholder="embedding_model" /></el-form-item>
        <el-form-item label="retriever_provider"><el-input v-model="agentC.retriever_provider" :disabled="isDis" placeholder="retriever_provider" /></el-form-item>
        <el-form-item label="向量数据库名称（唯一标识）"><el-input v-model="agentC.collection_name" :disabled="isDis" placeholder="collection_name" /></el-form-item>
        <el-form-item label="response_system_prompt"><el-input v-model="agentC.response_system_prompt" :disabled="isDis" placeholder="response_system_prompt" /></el-form-item>
        <el-form-item label="response_model"><el-input v-model="agentC.response_model" :disabled="isDis" placeholder="response_model" /></el-form-item>
        <el-form-item label="query_system_prompt"><el-input v-model="agentC.query_system_prompt" :disabled="isDis" placeholder="query_system_prompt" /></el-form-item>
        <el-form-item label="query_model"><el-input v-model="agentC.query_model" :disabled="isDis" placeholder="query_model" /></el-form-item>
      </div>
      <div v-else-if="formData.graph_id=='indexer'">
        <el-divider content-position="left">数据库配置</el-divider>
        <el-form-item label="user_id"><el-input v-model="agentC.user_id" :disabled="isDis" placeholder="user_id" /></el-form-item>
        <el-form-item label="embedding_model"><el-input v-model="agentC.embedding_model" :disabled="isDis" placeholder="embedding_model" /></el-form-item>
        <el-form-item label="retriever_provider"><el-input v-model="agentC.retriever_provider" :disabled="isDis" placeholder="retriever_provider" /></el-form-item>
        <el-form-item label="向量数据库名称（唯一标识）"><el-input v-model="agentC.collection_name" :disabled="isDis" placeholder="collection_name" /></el-form-item>
      </div>
      <el-divider content-position="left">metaData数据</el-divider>
      <el-form-item label="metadata" style="width:100%;">
        <el-input v-model="formData.metadata" type="textarea" :disabled="isDis" placeholder="" :autosize="{ minRows: 1, maxRows: 4}"/>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  export default {
    name: 'AgentForm',
    props: {
      initialData: {
        type: Object,
        default: () => ({})
      },
      isDis: {
        type: Boolean,
        default: false
      }
    },
    data() {
        return {
            agentType: [{ value: 'indexer', label: "向量数据库", raw: { listClass: 'warning' } }],
            formData: { ...this.initialData },
            agentC: {
                user_id: "BizWL",
                embedding_model: "openai/BAAI/bge-m3",
                retriever_provider: "milvus",
                collection_name: "JinBo",
                response_system_prompt: "You are a helpful AI assistant. Answer the user's questions based on the retrieved documents.\n\n{retrieved_docs}\n\nSystem time: {system_time}",
                response_model: "deepseek/deepseek-chat",
                query_system_prompt: "Generate search queries to retrieve documents that may help answer the user's question. Previously, you made the following queries:\n  \n<previous_queries/>\n{queries}\n</previous_queries>\n\nSystem time: {system_time}",
                query_model: "deepseek/deepseek-chat"
            },
            indexerC: {
                user_id: "BizWL",
                embedding_model: "openai/BAAI/bge-m3",
                retriever_provider: "milvus",
                collection_name: "BizWL"
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                graph_id: [
                    { required: true, message: '请选择助手类型', trigger: 'change' }
                ]
            }
        }
    },
    watch: {
        initialData: {
            deep: true,
            immediate: true,
            handler(newVal) {
                this.formData = { ...newVal }
                this.formData.metadata = JSON.stringify(newVal.metadata)
                if (newVal.config && newVal.config.configurable) {
                    this.agentC = newVal.config.configurable
                }
            }
        }
    },
    methods: {
      upConfig(e) {
        if (e === 'retrieval_graph') {
          this.agentC = {...this.graphC}
        } else if (e === 'indexer') {
          this.agentC = {...this.indexerC}
        }
        console.log(this.agentC)
        // this.formData.config = { configurable: this.agentC }
        this.formData.config = JSON.stringify({ configurable: this.agentC }, null, 2)
      },
      getFormData() {
        return {
          ...this.formData,
          config: this.formData.graph_id !== 'agent' ? { configurable: this.agentC } : JSON.parse(this.formData.config || '{}'),
          metadata: JSON.parse(this.formData.metadata || '{}')
        }
      },
      validateForm() {
        return this.$refs.form.validate()
      },
      resetForm() {
        this.$refs.form.resetFields()
      }
    }
  }
  </script>